<!DOCTYPE HTML>
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css"/>
<link rel="stylesheet" href="assets/css/jquery.appMenu.min.css">
<title>Mac OS X Lion Kampoeng</title>
<meta name="description" content="Mac Os X Lion with CSS3 Experiment - I wanted to create with only use of CSS3 the boot, the login page and finally the desktop of the Mac OS X Lion." />
<script type="text/javascript" src="assets/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="assets/js/modernizr.js"></script>
<script type="text/javascript" src="assets/js/storage.js"></script>
<script type="text/javascript" src="assets/js/layer-v1.8.5/layer/layer.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.appMenu-1.0.min.js"></script>
<script type="text/javascript" src="assets/js/fix-and-clock.js"></script>
<link rel="canonical" href="http://mac.kampoeng.co/" />
</head>

<body class="osx">

    <!-- FAIL -->
    <div id="fail">
        <div class="fail-browser-logo">
            <img src="assets/img/apple-logo-login.png" alt="Mac OS X" />
        </div>
        <div class="fail-browser">
            <p><strong>I'm sorry to inform you that your browser don't support CSS3 Animations!</strong></p>
            <p>This site uses features that <em>require</em> a modern browser - why not try <a href="http://www.mozilla.org/en-US/firefox/fx/" target="_blank" title="Download Firefox">Firefox</a> ?</p>
        </div>
    </div>

    <!-- BOOT -->
    <div id="pageLoading" class="sence">
        <div class="loading">
            <div class="apple-logo"></div>
            <div class="spinner"></div>
        </div>
        <audio id="startSound" preload="auto" style="position:absolute; visibility:hidden;">
            <source src="assets/MacStartUp.mp3"></source>
            <source src="assets/MacStartUp.ogg"></source>
        </audio>
    </div>

    <!-- LOGIN -->
    <div id="pageLogin" class="sence">
        <header id="headlogin">
            <nav id="menu-dx-login">
            <ul>
                <li class="wireless"></li>
                <li class="time">
                <ul>
                    <li class="hours"> </li>
                    <li class="point">:</li>
                    <li class="min"> </li>
                </ul>
                </li>
            </ul>
            </nav>
        </header>
        <div class="new-apple-logo"></div>

        <div class="user-avatar">
            <div id="avatar">
                <a href="#hide" class="hide" id="hide"></a>
                <a href="#show" class="show" id="show"></a>
                <div id="cover"></div>
                <div class="ava-css"><img src="assets/img/Lion.gif" width="100" /></div>
                <div class="logName">
                <p>yangweijie</p>
                </div>
                <div id="switch">
                    <div class="validate">
                        <form action="#page">
                            <input type="password" id="password" placeholder="Password" />
                            <input type="submit" class="submit" />
                            <div class="tooltip-pass">
                            <p>Password: admin</p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- DESKTOP -->
    <div id="page" class="sence">
        <header id="head">
            <nav id="menu">
                <ul>
                <li class="apple">
                    <a href="#all">Apple</a>
                    <ul class="sublist">
                    <li><a href="#about-this-mac" data-rel="show">关于本机</a></li>
                    <li>软件更新...</li>
                    <li>App Store...</li>
                    <li class="divider"></li>
                    <li>系统偏好配置...</li>
                    <li>Dock
                        <span class="arrow"></span>
                        <ul class="sublist-menu">
                        <li>关闭隐藏</li>
                        <li>关闭放大</li>
                        <li class="divider"></li>
                        <li>放在左边</li>
                        <li>放在底部</li>
                        <li>放在右边</li>
                        <li class="divider"></li>
                        <li>Dock 偏好设置...</li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li>最近使用项目
                        <span class="arrow"></span>
                        <ul class="sublist-menu">
                        <li class="disable">应用</li>
                        <li class="divider"></li>
                        <li class="disable">文档</li>
                        <li class="divider"></li>
                        <li class="disable">服务器</li>
                        <li class="divider"></li>
                        <li>清除菜单</li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li>强制退出...</li>
                    <li class="divider"></li>
                    <li>睡眠</li>
                    <li>重启...</li>
                    <li id="shutdown">关机...</li>
                    <li class="divider"></li>
                    <li id="logout">注销</li>
                    </ul>
                </li>
                <li class="here">
                    <a href="#">桌面</a>
                </li>
                <li class="">
                    <a href="#">文件管理</a>
                </li>
                <li>
                    <a href="#">编辑器</a>
                </li>
                <li>
                    <a href="#">Sqlbuddy</a>
                </li>
                </ul>
            </nav>
            <nav id="menu-dx">
                <ul>
                <li class="wireless">
                    <a href="#all">Wireless</a>
                </li>
                <li class="time">
                    <ul>
                    <li id="DateAbbr"> </li>
                    <li class="hour"> </li>
                    <li class="point">:</li>
                    <li class="mins"> </li>
                    </ul>
                </li>
                <li class="username">
                    <a href="#all">yangweijie</a>
                </li>
                </ul>
            </nav>
        </header>
        <section id="container1" class="container"></section>
        <section id="container2" class="container hidden">1</section>
        <section id="container3" class="container hidden">2</section>
        <section id="container4" class="container hidden">
            <iframe src="/Apps/sqlbuddy/index.php" frameborder="0" width="100%"></iframe>
        </section>
        <div id="appMenu"><ul></ul></div>

        <div id="about-this-mac" class="window mac" style="display:none;">
            <div class="container-inside">
                <img src="assets/img/MacOSX.png" alt="Mac OS X"/>
                <div class="about-this">
                    <p>Version 10.7.2</p>
                    <p><a class="button about" href="#">Software Update...</a></p>
                    <ul class="hardware">
                        <li><strong>Processor</strong> 2 Ghz Intel Core 2 Duo</li>
                        <li><strong>Memory</strong> 4 GB 1067 Mhz DDR3</li>
                        <li><strong>Startup Disk</strong> Macintosh HD</li>
                    </ul>
                    <p><a class="button about" href="#">More Info...</a></p>
                    <div class="copyright">
                        <p>TM and © 1983-2011 Apple Inc</p>
                        <p>All Rights Reserved</p>
                    </div>
                </div>
            </div>
        </div>

        <div id="warning" class="window warning">
            <div class="tab"></div>
            <div class="container">
                <div class="container-alert">
                <img src="assets/img/Alert.png" alt="alert"/>
                <div class="about-alert">
                <h2>Alert</h2>
                <p>This application cannot be used in this version</p>
                <a href="#warning" class="button blink" data-rel="close">Close</a>
                </div>
                </div>
            </div>
        </div>

        <!-- DOCK -->
        <div class="dock">
            <ul>
                <li id="finderr">
                    <a href="#warning" data-rel="showOp">
                        <em><span>Finder</span></em>
                        <img src="assets/img/FinderIcon.png" alt="Finder"/>
                    </a>
                </li>
                <li id="launchPad">
                    <a href="#warning" data-rel="showOp">
                        <em><span>Launchpad</span></em>
                        <img src="assets/img/launchPad.png" alt="Launchpad"/>
                    </a>
                </li>
                <li id="expose">
                    <a href="#warning" data-rel="showOp">
                        <em><span>Mission Control</span></em>
                        <img src="assets/img/expose.png" alt="Mission Control"/>
                    </a>
                </li>
                <li id="appStore">
                    <a href="#warning" data-rel="showOp">
                        <em><span>App Store</span></em>
                        <img src="assets/img/appstore.png" alt="App Store"/>
                    </a>
                </li>
                <li id="safari">
                    <a href="#warning" data-rel="showOp">
                        <em><span>Safari</span></em>
                        <img src="assets/img/Safari.png" alt="Safari"/>
                    </a>
                </li>
                <li id="iChat">
                    <a href="#warning" data-rel="showOp">
                        <em><span>iChat</span></em>
                        <img src="assets/img/ichat.png" alt="iChat"/>
                    </a>
                </li>
                <li id="facetime">
                    <a href="#warning" data-rel="showOp">
                        <em><span>FaceTime</span></em>
                        <img src="assets/img/facetime.png" alt="Facetime"/>
                    </a>
                </li>
                <li id="addressBook">
                    <a href="#warning" data-rel="showOp">
                        <em><span>Address Book</span></em>
                        <img src="assets/img/address.png" alt="Address Book"/>
                    </a>
                </li>
                <li id="preview">
                    <a href="#warning" data-rel="showOp">
                        <em><span>Preview</span></em>
                        <img src="assets/img/preview.png" alt="Preview"/>
                    </a>
                </li>
                <li id="iTunes">
                    <a href="#warning" data-rel="showOp">
                        <em><span>iTunes</span></em>
                        <img src="assets/img/iTunes.png" alt="iTunes"/>
                    </a>
                </li>
                <li id="preferences">
                    <a href="#warning" data-rel="showOp">
                        <em><span>System Preferences</span></em>
                        <img src="assets/img/preferences.png" alt="System Preferences"/>
                    </a>
                </li>
                <li id="trash">
                    <a href="#trash" data-rel="showOpTrash">
                        <em><span>Trash</span></em>
                        <img src="assets/img/trash.png" alt="Trash"/>
                    </a>
                </li>
            </ul>
        </div>

    </div>
</body>
</html>

